<template>
  <div>
    <Card :shadow="shadow">
      <div class="home-name">
        <div class="name">今/昨日订单</div>
      </div>
      <Row :gutter="20" style="margin-top: 15px;">
        <i-col :xs="12" :md="8" :lg="4" v-for="(list, index) in listData" :key="`list-${index}`" style="padding-bottom: 10px;">
          <div class="home-item" v-if="index %2 == 0">
            <div class="item-title">{{list.title}}</div>
            <div class="item-font">{{list.count}} <span style="color: #999; font-size: 15px;">个</span></div>
          </div>
          <div class="home-item" v-else>
            <div class="item-title">{{list.title}}</div>
            <div class="item-font">{{list.count}} <span style="color: #999; font-size: 15px;">元</span></div>
          </div>
        </i-col>
      </Row>
    </Card>
    <Card :shadow="shadow" style="margin-top: 15px;">
      <div class="home-name">
        <div class="name">近七日平台交易金额</div>
      </div>
      <Row style="margin:40px 45px;">
        <i-col>
          <deals style="height: 300px;"/>
        </i-col>
      </Row>
    </Card>
    <Card :shadow="shadow" style="margin-top: 15px;">
      <div class="home-name">
        <div class="name">平台</div>
      </div>
      <Row :gutter="20" style="margin-top: 15px;">
        <i-col :xs="12" :md="8" :lg="4" v-for="(platform, index) in platformData" :key="`platform${index}`" style="padding-bottom: 10px;">
          <div class="home-item" v-if="index == 0||index ==1||index ==2||index ==4||index ==6">
            <div class="item-title">{{platform.title}}</div>
            <div class="item-font">{{platform.count}} <span style="color: #999; font-size: 15px;">个</span></div>
          </div>
          <div class="home-item" v-else>
            <div class="item-title">{{platform.title}}</div>
            <div class="item-font">{{platform.count}} <span style="color: #999; font-size: 15px;">元</span></div>
          </div>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import Deals from './deals.vue'
  export default{
    name: 'home',
    components: {
      Deals
    },
    props:{
      shadow: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        listData: [
          { title: '今日充值订单',count: 2 },
          { title: '今日充值金额',count: 20000 },
          { title: '今日线下充值订单',count: 0 },
          { title: '今日线下充值总额',count: 0 },
          { title: '今日代付订单',count: 3 },
          { title: '今日代付订单',count: 3000 },
          { title: '昨日充值订单',count: 0 },
          { title: '昨日充值总额',count: 0 },
          { title: '昨日线下充值订单',count: 0 },
          { title: '昨日线下充值总额',count: 0 },
          { title: '昨日代付订单',count: 0 },
          { title: '昨日代付订单',count: 0 },
        ],
        platformData: [
          { title: '代理商',count: 4 },
          { title: '商户总数',count: 5 },
          { title: '充值订单',count: 21 },
          { title: '充值总额',count: 368573 },
          { title: '线下充值订单',count: 17 },
          { title: '线下充值总额',count: 89110 },
          { title: '代付订单',count: 33 },
          { title: '代付总额',count: 14256 },
          { title: '总利润',count: 27432.15 },
          { title: '充值利润',count: 2010.51 },
          { title: '代付利润',count: 38.26 },
          { title: '线下充值利润',count: 25383.38 },
        ]
      }
    }
  }
</script>

<style lang="less">
.home-name{
  height: 42px;
  border-bottom: 1px solid #f6f6f6;
  .name{
    margin: 0 15px;
    padding: 0;
    line-height: 42px;
  }
}
.home-item{
  display: block;
  padding: 10px 15px;
  background-color: #f8f8f8;
  color: #999;
  border-radius: 2px;
  transition: all .3s;
  -webkit-transition: all .3s;
  .home-title{
  }
  .item-font{
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: #009688;
  }
}
</style>
